<script setup lang="ts">
  import { computed, ref, toRefs } from 'vue'
  const props = defineProps({
    orderDetail: Object,
  })
  const { orderDetail } = toRefs(props)
</script>

<template>
  <div>
    <div class="order_detail_network_info">
      <div class="title">网点信息</div>
      <div class="info_list">
        <div class="info_item_container">
          <div class="info_item">
            <div class="label">网点编号:</div>
            <div class="value">
              <ShowTooltip
                placement="top"
                refName="testName2"
                className="is_textClass"
                :content="orderDetail.networkCode || ''"
                :isText="true"
                color="#000"
                :size="12"
                :offset="5"
                :showAfter="200"
              >
              </ShowTooltip>
            </div>
          </div>
          <div class="info_item">
            <div class="label">网点名称:</div>
            <div class="value">
              <ShowTooltip
                placement="top"
                refName="testName2"
                className="is_textClass"
                :content="orderDetail.network || ''"
                :isText="true"
                color="#000"
                :size="12"
                :offset="5"
                :showAfter="200"
              ></ShowTooltip>
            </div>
          </div>
          <div class="info_item">
            <div class="label">网点手机:</div>
            <ShowTooltip
              placement="top"
              refName="testName2"
              className="is_textClass"
              :content="orderDetail.networkPhone || ''"
              :isText="true"
              color="#000"
              :size="12"
              :offset="5"
              :showAfter="200"
            ></ShowTooltip>
          </div>
          <div class="info_item">
            <div class="label">服务工程师:</div>
            <div class="value">
              <ShowTooltip
                placement="top"
                refName="testName2"
                className="is_textClass"
                :content="orderDetail.engineer || ''"
                :isText="true"
                color="#000"
                :size="12"
                :offset="5"
                :showAfter="200"
              >
              </ShowTooltip>
            </div>
          </div>

          <div class="info_item">
            <div class="label">网点最终结算:</div>
            <div class="value">￥{{ Number(orderDetail.networkEndSettlement).toFixed(2) }}</div>
          </div>
          <div class="info_item">
            <div class="label">网点服务费:</div>
            <div class="value">￥{{ Number(orderDetail.networkServiceFee).toFixed(2) }}</div>
          </div>
          <div class="info_item">
            <div class="label">网点调整金额:</div>
            <div class="value">￥{{ Number(orderDetail.networkAdjustFee).toFixed(2) }}</div>
          </div>
          <div class="info_item">
            <div class="label">网点调整原因:</div>
            <div class="value">
              <ShowTooltip
                placement="top"
                refName="testName2"
                className="is_textClass"
                :content="orderDetail.networkAdjustReason || ''"
                :isText="true"
                color="#000"
                :size="12"
                :offset="5"
                :showAfter="200"
              ></ShowTooltip>
            </div>
          </div>

          <div class="info_item">
            <div class="label">网点申请金额:</div>
            <div class="value">￥{{ Number(orderDetail.applyNetworkFee || 0).toFixed(2) }}</div>
          </div>
          <div class="info_item">
            <div class="label">网点申请原因:</div>
            <ShowTooltip
              placement="top"
              refName="testName2"
              className="is_textClass"
              :content="orderDetail.networkApplyReason || ''"
              :isText="true"
              color="#000"
              :size="12"
              :offset="5"
              :showAfter="200"
            ></ShowTooltip>
          </div>
          <div class="info_item">
            <div class="label">是否确认接单:</div>
            <ShowTooltip
              placement="top"
              refName="testName2"
              className="is_textClass"
              :content="orderDetail.sureReceivingOrder || ''"
              :isText="true"
              color="#000"
              :size="12"
              :offset="5"
              :showAfter="200"
            ></ShowTooltip>
          </div>
          <div class="info_item">
            <div class="label">确认接单时间:</div>
            <ShowTooltip
              placement="top"
              refName="testName2"
              className="is_textClass"
              :content="orderDetail.sureReceivingOrdersTime || ''"
              :isText="true"
              color="#000"
              :size="12"
              :offset="5"
              :showAfter="200"
            ></ShowTooltip>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .order_detail_network_info {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .title {
      font-size: 14px;
      font-weight: bold;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
    }

    .info_list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0 16px;

      .info_item_container {
        display: grid;
        grid-template-columns: repeat(auto-fill, 180px);
        /* 尽可能多地填充列，每列最小100px，根据需要伸缩 */
        gap: 12px;
        column-gap: 64px;

        /* 设置网格项之间的间距 */
        .info_item {
          display: flex;
          gap: 5px;
          flex: 1;
          white-space: nowrap;

          .label {
            color: #606266;
            min-width: 74px;
            text-align: right;
          }

          .value {
            white-space: nowrap;
            // min-width: calc(160px - 74px);
          }
        }
      }
    }
  }
</style>
